import React from 'react';
import { Table, Tag, Modal ,message} from 'antd'
import { withRouter} from 'react-router-dom'
import axios from '../../utils/http'
// import { convertKey } from '../../utils/utils'
@withRouter
class TableContent extends React.Component {
  constructor() {
    super()
    this.state = {
      tableData: [],
      filedData: [],
      titleData: [],
      caozuo: [],
      modal2Visible: false,
      Id: '',
      detali: {
        memName: '暂时没有查询到数据',
        memNum:'暂时没有查询到数据',
        memLocation:'暂时没有查询到数据'
      },
      dsald:4
    }
  }
  dianji = (a,currentid) => {
    return () => {
      if (a === '查看账目明细') {
        this.props.history.push({ pathname:'/Home/huiYuan/LookAccount',state:{currentid}})
      }
      else if (a === '收获地址') {
        console.log(currentid);
        axios({
          url: '/member/queryShipars',
          method: 'get',
          params: {member_id:currentid}
            // 这里的currentid就是当前行的id，可以通过这个id发起axios请求获取modal里面的数据
        }).then(({data}) => {
          // console.log(data.data)
          if (data.data .length>0) {
            this.setState({
              detali:data.data[0]
            })
          }
          return 1
        }).then(data => {
          this.setModal2Visible(true)
        })
        
      }
      else if (a === '删除') {
        axios({
          url: '/member/deleteMember',
          method: 'get',
          params: {
            member_id:currentid
          }
        }).then(data => {
          console.log(data)
          if (data.data.code === 200) {
            message.success('删除成功');
          }
        })
        // axios({
        //   url: '//member/queryMember',
        //   method:'get'
        // }).then(({ data }) => {
        //   console.log(data)
        //   for (let i = 0; i < data.data.length; i++){
        //     data.data[i].key=i
        //   }
        //   this.setState({
        //     tableData:data.data
        //   })
        // })
      }
      else if (a === '清除') {
        console.log(currentid)
        axios({
          url: '/member/deleteCil',
          method: 'get',
          params: {
            cilId:currentid
          }
        }).then(data => {
          if (data.data.code === 200)
            message.success('清除成功')
        })
      }
    }
  }
  setModal2Visible(modal2Visible) {
    this.setState({ modal2Visible });
  }
  rendercolumn = () => {
    return this.state.titleData.map((item, i) => {
      if (item === '头像') {
        return <Table.Column title='88' dataIndex={this.state.filedData[i]} key={i} render={(thissrc) => {
          return  <img style={{ width: '80px', height: '80px' }} src={thissrc} alt='头像' />
        }}/>
      } else if (item === '操作') {
        return <Table.Column title="操作" dataIndex={this.state.filedData[0]} key={ i} render={(thisid) => {
          return  this.state.caozuo.map((elment,p) => {
            return <Tag color={'purple'} key={p} onClick={ this.dianji(elment,thisid)}>{ elment}</Tag>
              })
          }
        } />
      }
      else {
        return <Table.Column title={ item} dataIndex={this.state.filedData[i]} key={Math.random()} />
      } 
    })
  }
  render() { 
    return (
      <div>
    <Table
          dataSource={this.state.tableData}
          pagination={{
            position: ['none', 'bottomCenter'],
            defaultPageSize: 5,
          }}
        >
        {this.rendercolumn()}
        </Table>
        <Modal
          title="收获地址"
          centered
          visible={this.state.modal2Visible}
          onOk={() => this.setModal2Visible(false)}
          onCancel={() => this.setModal2Visible(false)}
        >
          <p>姓名：{ this.state.detali.memName}</p>
          <p>手机号码：{this.state.detali.memNum }</p>
          <p>地址：{ this.state.detali.memLocation}</p>
        </Modal>
    </div> 
);
  }
  componentDidMount() {
    let myurl, metho,pama,id
    
    if (this.props.whopage === 'vipmanage') {
      // console.log(123);
      // myurl = '/getVipManageData'
      myurl = '/member/queryMember'
      metho = 'get'
      this.setState({
        filedData: ['key', 'memberHp', 'memberNn', 'memberName', 'memberSex', 'memberRegion', 'memberPhone'],
        titleData: ['Id', '头像', '昵称', '姓名', '性别', '地区', '手机号码', '操作'],
        caozuo:['收获地址','查看账目明细','删除']
      }
      )
    }
    else if (this.props.whopage === 'LookAccount') {
      // myurl = '/lookaccount'
      myurl = '/member/queryAcd'
      metho = 'get'
      id = this.props.location.state.currentid//接收传过来的值
      console.log(id)
      pama = { memberId:id }
      this.setState({
        filedData: ['mmacAct', 'mmacRfac', 'mmacGpa', 'mmacFaf', 'mmacGpa', 'mmacCpa'],
        titleData: ['账户变动时间', '账户变动原因', '可用资金账户', '冻结资金账户', '等级积分账户', '消费积分账户'],
        caozuo:[]
      })
    }
    else if (this.props.whopage === 'SignLog') {
      myurl = '/member/queryCil'
      metho = 'get'
      this.setState({
        filedData: ['cilId', 'cilHp', 'cilNn', 'cilItl', 'cilSid'],
        titleData: ['ID', '头像', '昵称', '积分', '签到日期', '操作'],
        caozuo:['清除']
      })
    }
    axios({
      url: myurl,
      method: metho,
      params:pama 
    }).then(({ data }) => {
      console.log(data.data)
      for (let i = 0; i < data.data.length; i++){
        data.data[i].key=i
      }
      this.setState({
        tableData:data.data
      })
    });
  }
  componentWillReceiveProps(nextProps) {
    // console.log(nextProps.shuju)
    if (nextProps.shuju.length > 0) {
      for (let i = 0; i < nextProps.shuju.length; i++){
        nextProps.shuju[i].key=i
      }
      this.setState({
        tableData:nextProps.shuju
      })
    }
    
  }
}
export default TableContent;